<script setup lang="ts">
  import { onMounted, ref } from "vue";
  import { useFileStore } from "@/stores";

  const fileStore = useFileStore();
  const modalVisible = ref(false);
  const files = ref<any>([]);
  const file = ref<any>({});

  onMounted(() => {
    fetchList();
  });

  async function fetchList() {
    files.value = await fileStore.getFileList();
  }

  function handleAdd() {
    file.value = {};
    modalVisible.value = true;
  }

  async function handleRemove(record: any) {
    await fileStore.deleteFile({ id: record.id });
    files.value = files.value.filter((item: any) => item.id !== record.id);
  }
</script>

<template>
  <div class="page-container">
    <Breadcrumb :items="['系统管理', '文件列表']"></Breadcrumb>
    <a-card :bfileed="false">
      <a-button type="primary" size="small" style="margin-bottom: 16px" @click="handleAdd">上传文件</a-button>
      <a-table :data="files">
        <template #columns>
          <a-table-column title="文件名称" data-index="name" />
          <a-table-column title="文件类型" data-index="typeValue" />
          <a-table-column title="文件链接" data-index="url" />
          <a-table-column title="文件哈希值" data-index="hash" />
          <a-table-column title="创建时间" data-index="createdAt" :width="180" />
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-space>
                <a-popconfirm content="您确认移除此问题么？" @ok="handleRemove(record)">
                  <a-button type="primary" size="small" status="danger">移除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <a-modal :visible="modalVisible" title="文件上传" @cancel="modalVisible = false" @ok="fetchList">
      <umi-upload baseURL="https://static.usemath.cn"></umi-upload>
    </a-modal>
  </div>
</template>
